import styled, { keyframes } from 'styled-components'

export const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`

export const slideIn = keyframes`
  0% { transform: translateX(-100px); }
  60% {transform: translateX(30px);}
  70% {transform: translateX(0px);}
  85% {transform: translateX(10px);}
  100% { transform: translateX(0); }
`

export const slideUp = keyframes`
  from { transform: translateY(300px); }
  to { transform: translateY(0); }
`

export const fadeAndScaleIn = keyframes`
  from {
    opacity: 0;
    transform: scale(.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
`

export const pulsate = keyframes`
  0% { transform: scale(1); }
  30% { transform: scale(0.5); }
  50% { transform: scale(1); }
  80% { transform: scale(0.5); }
  100% { transform: scale(1); }
`

export const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`

export const Fade = styled.span`
  animation: ${fadeIn} ${props => props.timing || '250ms'} ease-in-out;
`



// WEBPACK FOOTER //
// ./src/components/Animation/index.js